feat(color-contrast): add support for CSS mix-blend-mode #3226
Conversation
straker
changed the title
Zidious
changed the title
…into mix-blend-mode
…into mix-blend-mode
Zidious
changed the title
| @@ -38,9 +38,251 @@ describe('color.flattenColors', function() { | |||
| assert.equal(flat5.alpha, 1); | |||
|
|
|||
| var flat6 = axe.commons.color.flattenColors(quarterLightGreen, halfRed); | |||
| assert.equal(flat6.red, 96); | |||
There was a problem hiding this comment.
The way were were actually blending the colours was not quite accurate. When you start adding alpha values to colours the way they are calculated is different. Opacity adds another step whereby the pre-multiplied computed new RGB values need to be divided by the new computed alpha, we were missing this step:
To extract the color component of a pre-multiplied value, the formula is reversed: Co = co / αo
source: https://www.w3.org/TR/compositing-1/#simplealphacompositing
helpful source: w3c/fxtf-drafts#440 (comment)
| 'rgb(223, 112, 96)', | ||
| 'rgb(255, 128, 128)', | ||
| 'rgb(191, 223, 191)', | ||
| 'rgb(125, 38, 54)', | ||
| 'rgb(179, 38, 0)', | ||
| 'rgb(179, 0, 77)', | ||
| 'rgb(143, 192, 80)', |
There was a problem hiding this comment.
why this change? Seems like a rounding difference of some sort.
There was a problem hiding this comment.
I believe this was caused by #3226 (comment) and the threshold of rounding was impacted
mix-blend-modefunctions:This PR focuses on blending BG colours. An example of mix-blend-mode in action, consider the following:
When mix-blend-mode is applied onto a div it is considered an isolated group and therefore its own stacking context.
The stack of the above snippet would look like the following:
When blending we do bottom up:
For reference: compositing BG colours w3c assistance
Resources: Compositing and Blending - Note: further research I would like to investigate how to go about blending nested mix-blend-modes when in the same div block.
Closes issue: #3187